<template>
  <div class="cpt-comfyui-pubmodal  ">
    <el-dialog v-model="visible" title="" @close="handleClose" :z-index="10">
      <div class="dialogcon-pubworkinfo dialogcon-pubworkinfo-ai   flex rounded-2xl box-border p-0">
        <div class="left p-t-8 2xl:p-t-10" style="
              background-image: url('https://cdn.codinghou.cn/coding/pc-ai/icons/bg_pub.jpg');
              background-size: 100% 100%;
              background-repeat: no-repeat
            ">
          <!-- <div class="logo h-8 2xl:h-10 bg-contain bg-no-repeat bg-center" style="
              background-image: url('https://cdn.codinghou.cn/coding/pc-ai/icons/login-logo1.png');
            "></div>
          <div class="text m-t-6 p-t-3 box-border p-l-10 2xl:p-l-25 text-4 2xl:text-5 text-white text-left">

         

          </div> -->
          <!-- <div
            class="qrcode flex items-center justify-between mx-auto m-t-10 w-50 2xl:w-60 h-60 2xl:h-70 bg-contain bg-center bg-no-repeat"
            style="
              background-image: url('https://cdn.codinghou.cn/coding/qrcode/codinghou2021.png');
            "></div> -->
        </div>
        <div class="right p-t-10 p-l-10 2xl:p-t-20 2xl:p-l-20">
          <div class="text-bold text-center text-black-[#4A4A4A] text-xl 2xl:text-2xl">
            给你的作品起个名字吧
          </div>
          <el-form>
            <div class="form form1 m-t-5">
              <div class="name line">
                <div class="label">作品名称：</div>
                <div class="input">
                  <input type="text" placeholder="请输入作品名称" v-model="name" autocomplete="on" />
                </div>
              </div>

              <div class="btncon m-t-40">
                <div class="btn-submit " :class="[{ valid: name.length > 1 }]" v-loading="loading" @click="modifyWork">
                  确认修改
                </div>
              </div>
            </div>
          </el-form>



        </div>

      </div>
    </el-dialog>
  </div>

</template>
<script lang="ts" setup>




import { useAppStore } from "~/stores/app";


import { watch } from 'vue';
import { postAIModifyMyWorkInfo, postAIPubWorkInfo } from "../../service/yapi";

const { signIn, token, data, status, lastRefreshedAt, signOut, getSession } =
  useAuth();

let app = useAppStore();

let props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  currentWorkInfo: {
    type: Object,
    default: () => ({ id: "" })
  }
})
const { visible, currentWorkInfo } = toRefs(props);

let emits = defineEmits(['update:visible', 'editworkSuccess'])
watch(() => props.visible, (newVal) => {

  if (!newVal) {
    emits('update:visible', false);
  }
  if (newVal) {
    name.value = props.currentWorkInfo.name
  }
})
let name = ref("");

let loading = ref(false);

function handleClose() {
  emits('update:visible', false);
}


let route = useRoute();

async function modifyWork() {
  if (name.value.length < 2) {
    ElMessage.warning("请输入作品名称");
    return;
  }
  if (loading.value) {
    return;
  }
  loading.value = true;
  let res: any = await postAIModifyMyWorkInfo({
    id: currentWorkInfo.value.id,
    name: name.value

  })
  if (res.code == 1000) {
    ElMessage.success("修改成功");
    emits('editworkSuccess', { id: currentWorkInfo.value.id });
  } else {
    ElMessage.warning(res.message);
  }
  loading.value = false;
}
onMounted(() => {

});

</script>
<style lang="scss">
.dialogcon-pubworkinfo {
  @apply w-189 h-125 bg-[var(--black-light)] rounded-2xl;



  &.dialogcon-pubworkinfo-ai {
    background: #F7F7F7;

    .left {
      background: linear-gradient(180deg, #368298 0%, #88B9C8 100%);
      border-radius: 10px 0px 0px 10px;
    }

    .right {
      background: #F7F7F7;

      .form {
        .line {

          @apply bg-white;


          .input {
            background: url('https://cdn.codinghou.cn/coding/pc-ai/icons/bg_input.png');
            background-size: 100% 100%;
            padding: 10px;

          }

          input {


            @apply text-black-[#4A4A4A] bg-white block;

          }

          input::-webkit-input-placeholder {
            color: rgba(0, 0, 0, 0.45);
          }

          .input {
            @apply text-black-[#4A4A4A] border-none;

          }

        }
      }

      .btn-submit {
        background: linear-gradient(180deg, #B5FCF9 0%, #97B8F1 100%), #FFFFFF;

        &.valid {
          background: linear-gradient(180deg, #19E8E0 0%, #2974F6 92%, #2974F6 100%), #FFFFFF;

        }
      }

    }
  }

  .left {
    @apply flex-none w-81 bg-[var(--black-base)] rounded-2xl;
  }

  .right {
    @apply bg-[var(--black-light)];

    .form {
      .line {
        @apply bg-[#323232] flex text-5 items-[flex-end] m-b-2 w-87;


        .label {
          @apply text-4.5 text-gray-300 w-20 hidden;
        }

        input {
          @apply border-none bg-transparent line-height-8 p-l-2 w-87 h-12 bg-[#323232] rounded-2xl opacity-100 text-4.5 text-black-[#4A4A4A] box-border;

        }

        input:focus {
          outline: none;
        }

        input::-webkit-input-placeholder {
          color: rgba(255, 255, 255, 0.45);
        }

        .input {
          @apply text-black-[#4A4A4A] border-none;

        }
      }

      .password {
        .input {
          @apply relative w-full;

          .btn {
            @apply absolute right-2 top-2 text-5;
          }
        }
      }

      .btn-submit {
        @apply text-white text-center w-87 h-12 bg-[#755afb] line-height-12 rounded-2xl text-4.5 cursor-pointer mt-4;
      }

      .errortip {
        @apply text-red-600 mb-2;
      }
    }

    .switchtab {
      @apply mb-9 text-center text-black-[#4A4A4A] opacity-65 text-4.5 mt-2;

      .tablink {
        @apply text-purple-600 cursor-pointer;
      }
    }

    .tip {
      text-align: left;
      color: #fff;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.45);

      .wechat {
        font-weight: bold;
      }

      p {
        padding-top: 10px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.45);
      }
    }
  }

  .right2 {
    padding-top: 20px;

    .line {
      position: relative;

      &::before {
        content: "*";
        color: var(--red);
        position: absolute;
        left: -20px;
        top: 15px;
      }
    }

    .switchtab {
      margin-bottom: 20px;
    }
  }
}

@media only screen and (min-width: 1536px) {
  .dialogcon-pubworkinfo {
    @apply w-200 h-125;
  }
}
</style>
